<script setup>
import { onMounted, reactive, ref } from "vue";
import useTaskStore from "@/pinia/modules/taskStore";
import { storeToRefs } from "pinia";

const props = defineProps({
  status: {
    type: Number,
  },
});

const taskStore = useTaskStore();

const { completeList, completeCounts } = storeToRefs(taskStore);

const triggered = ref(false);

const params = reactive({
  page: 1,
  pageSize: 10,
  status: props.status,
  startTime: "",
  endTime: "",
});

const fetchCompleteList = async () => {
  try {
    await taskStore.fetchCompleteList(params);
  } catch (error) {
    uni.showToast({ title: error.message, duration: 2000, icon: "error" });
  }
};

const scrolltolower = () => {
  if (completeList.value.length >= completeCounts.value) return uni.showToast({ title: "没有更多已完成", duration: 2000, icon: "error" });
  fetchCompleteList();
};

const refresherrefresh = async () => {
  triggered.value = true;
  params.page = 1;
  completeList.value = [];
  await fetchCompleteList();
  triggered.value = false;
};

const changeStartTime = ({ detail }) => {
  params.startTime = detail.value;
};

const changeEndTime = ({ detail }) => {
  params.endTime = detail.value;
};

const filter = async () => {
  completeList.value = [];
  await fetchCompleteList();
};
onMounted(() => {
  fetchCompleteList();
});

</script>

<template>
  <view class="task-search">
    <view class="search-bar">
      <text class="iconfont icon-search"></text>
      <input class="input" type="text" placeholder="输入任务编号" />
    </view>
    <view class="filter-bar">
      <picker class="picker" mode="date" @change="changeStartTime">
        <text v-if="!params.startTime">开始时间</text>
        <text v-else>{{ params.startTime }}</text>
      </picker>
      <text class="text">至</text>
      <picker class="picker" mode="date" @change="changeEndTime">
        <text v-if="!params.endTime">结束时间</text>
        <text v-else>{{ params.endTime }}</text>
      </picker>
      <button class="button" @tap="filter">筛选</button>
    </view>
  </view>
  <scroll-view scroll-y refresher-enabled class="scroll-view" @scrolltolower="scrolltolower" @refresherrefresh="refresherrefresh" :refresher-triggered="triggered">
    <view class="scroll-view-wrapper">
      <view class="task-card" v-for="(item,index) in completeList" :key="item.id">
        <navigator hover-class="none" url="/subpkg_task/detail/index?id=001">
          <view class="header">
            <text class="no">任务编号:{{ item.transportTaskId }}</text>
          </view>
          <view class="body">
            <view class="timeline">
              <view class="line">{{ item.startAddress }}</view>
              <view class="line">{{ item.endAddress }}</view>
            </view>
          </view>
        </navigator>
        <view class="footer flex">
          <view class="label">提货时间</view>
          <view class="time">{{ item.actualArrivalTime }}</view>
        </view>
      </view>
      <view v-if="!completeList" class="task-blank">无完成货物</view>
    </view>
  </scroll-view>
</template>

<style lang="scss" scoped>
@import './styles.scss';

.task-search {
  padding: 30rpx;
  // margin-top: -1rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;

  .search-bar {
    position: relative;

    .icon-search {
      position: absolute;
      top: 22rpx;
      left: 24rpx;
      color: $uni-secondary-color;
      font-size: $uni-font-size-small;
    }

    .input {
      height: 72rpx;
      background-color: #f4f4f4;
      border-radius: 72rpx;
      padding-left: 72rpx;
      font-size: $uni-font-size-small;
    }
  }

  .filter-bar {
    display: flex;
    margin-top: 30rpx;
    font-size: $uni-font-size-small;
    text-align: center;
    line-height: 64rpx;
    color: $uni-secondary-color;

    .picker {
      width: 230rpx;
      height: 64rpx;
      border-radius: 64rpx;
      background-color: $uni-bg-color;
    }

    .text {
      margin: 0 24rpx;
    }

    .button {
      width: 120rpx;
      height: 64rpx;
      padding: 0;
      margin-left: 40rpx;
      line-height: 64rpx;
      border-radius: 64rpx;
      font-size: $uni-font-size-small;
      color: #fff;
      background-color: $uni-primary;

      &[disabled] {
        background-color: #fadcd9;
      }
    }
  }
}
</style>
